page {
  background-image: url('src/res/images/background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 60rpx;
  margin-bottom: 10rpx;
  margin-top: 80rpx;
  .statusWarp{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .statusPanel,
  .statusPanelDisable{
    width: 400rpx;
    height: 400rpx;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .statusPanel,
  .powerOn{
    background-image: url('src/res/images/circle.svg');
  }

  .statusPanelDisable,
  .powerOff{
    background-image: url('src/res/images/circle-disabled.svg');
  }

  .statusBox{
    width: 280rpx;
    height: 280rpx;
    background-color: #F2F2F2;
    border: solid 4rpx #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .statusText {
      text{
        font-size: 72rpx;
        font-weight: bold;
      }
    }
  }

  .powerOn,
  .powerOff {
    width: 120rpx;
    height: 120rpx;
    border:solid 3rpx #fff;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.content {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 12;
  padding: 24rpx;
}

.card {
  width: 100%;
  padding: 40rpx;
  border-radius: 30rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.modeHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  text {
    font-size: 32rpx;
  }
}


.modeWarpper {

  @gapX:30rpx;
  @gapY:40rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: @gapX;
  column-gap: @gapY;


  .roomText{
    font-size: 32rpx;
    display: -webkit-box; /* 必须设置为 Webkit 弹性盒子 */
    -webkit-box-orient: vertical; /* 必须设置为垂直排列 */
    overflow: hidden; /* 隐藏超出部分 */
    -webkit-line-clamp: 2; /* 限制显示两行 */
    white-space: normal; /* 允许文本换行 */
    word-wrap: break-word; /* 确保长单词会换行 */
    width: 100%; /* 确保有合适的宽度来显示文本 */
    text-align: center;

  }

  .modeItemActive,
  .modeItem {
    width: calc(50% - @gapX);
    display: flex;
    background-color: #dddddd;
    justify-content: space-between;
    align-items: center;
    border-radius: 50rpx;
    border: solid 2rpx #dddddd;
    overflow: hidden; /* 隐藏超出部分 */
    >view{
      height: 90rpx;
      padding: 0 40rpx;
    }
  }

  .modeItemActive {
    background-color: #5195D0;
    border: solid 2rpx #5195D0;
    color: #fff;
  }

  .customItem{
    border-radius: 50rpx;
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #dddddd;
    position: relative;
    height: 100%;
  }
  .customIcon{
    position: absolute;
    right: 10;
    display: flex;
    align-items: center;
    justify-self: center

  }

}


.cell {
  width: 100%;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.cell>view:nth-child(1) {
  flex: 1;
  text {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }
}
.cell>view:nth-child(2) {
  flex: 5;
  text {
    font-size: 26rpx;
    color: #333;
  }
}
.cell>view:nth-child(3){
 margin-left: 20rpx;
}

// 分割线
.divider {
  width: 100%;
  height: 1rpx;
  background-color: #ddd;
  margin: 20rpx 0;
}

.smart-switch-node {
  width: .5rem !important;
  height: .5rem !important;
}

.intervalWrap{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10;
}


.levelWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;

  >view {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.cycleWrap{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  .day,
  .selectedDay {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 80rpx;
    border-radius: 50%;
    border: 1rpx solid #ccc;
    background-color: #D4D5D6;
    text {
      font-size: 22rpx !important;
    }
  }

  .selectedDay {
    border: 1rpx solid #5195D0;
    background-color: #5195D0;
    text {
      color: #fff !important;
      font-weight: 600;
    }

  }

}

.dividerVertical {
  width: 4rpx;
  height: 50rpx;
  background-color: #ddd;
  margin: 0 20rpx;
}

.flexBetween{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
  text {
    color: #999;
  }
}


.gearText{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.poMoreBtn{
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  position: absolute;
  right: 0;
  z-index: 10;
}


.modeRightBox{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}
